<template>
	<div id="model-container">

	</div>
</template>


<script>
	const modelCache = new Map();
	const abortControllers = new Set(); // 追踪所有加载请求
	import api from "@/api/http.js";
	// 模型开始
	import * as THREE from 'three'
	import {
		GLTFLoader
	} from 'three/examples/jsm/loaders/GLTFLoader';
	import {
		OrbitControls
	} from 'three/examples/jsm/controls/OrbitControls';
	import {
		EffectComposer
	} from "three/examples/jsm/postprocessing/EffectComposer"
	import {
		RenderPass
	} from "three/examples/jsm/postprocessing/RenderPass"
	import {
		OutlinePass
	} from "three/examples/jsm/postprocessing/OutlinePass"
	import {
		GammaCorrectionShader
	} from 'three/examples/jsm/shaders/GammaCorrectionShader';
	import {
		ShaderPass
	} from "three/examples/jsm/postprocessing/ShaderPass"
	import {
		FXAAShader
	} from "three/examples/jsm/shaders/FXAAShader";
	// 模型结束
	import {
		Loading
	} from 'element-ui';
	const configUrl = window.IP
	export default {
		name: "CalendarTraffic",
		data() {
			return {
				isModelControl: false,
				loadingInstance: null,
				// 模型开始
				camera: null, //相机
				scene: null, //场景
				renderer: null, //渲染器
				container: null, //容器
				controls: null, //控制器
				composer: null,
				outlinePass: null,
				renderPass: null,
				animateId: null,
				zhitikuangjia: {},
				yeyinlun: {},
				yeyinddaoshenlun: {},
				jiaoxiangdaoshenlun: {},
				duizhongdaoshenlun: {},
				duizhong: {},
				jiaoxiang: {},

				youmen1: {},
				zuomen1: {},
				youmen2: {},
				zuomen2: {},
				doorleft: {},
				doorright: {},

				yeyinlungangsishen: {},
				duizhonggangsishent: {},
				yijiegangsishen: {},

				duizhonggudingduan: {},
				jiaoxianggudingduan: {},

				modelControls: {
					zhitikuangjia: {
						x: 0,
						y: -10,
						z: 0
					}, //直梯框架
					yeyinlun: {
						x: -0.743,
						y: 11.839,
						z: 0
					}, //曳引轮
					yeyinddaoshenlun: {
						x: -1.709,
						y: 10.282,
						z: 0.11
					}, //曳引导绳轮
					duizhongdaoshenlun: {
						x: -2.065,
						y: 6.336,
						z: 0.44
					}, //对重导绳轮
					duizhong: {
						x: -2,
						y: 3.63,
						z: 1.324
					}, //对重
					jiaoxiangdaoshenlun: {
						x: 0,
						y: -0.305,
						z: 0.11
					}, //轿厢导绳轮
					jiaoxiang: {
						x: 0,
						y: -1.031,
						z: 0.11
					}, //轿厢
					youmen1: {
						x: 1.69,
						y: -2.779,
						z: -0.47
					}, //一楼右门
					zuomen1: {
						x: 1.69,
						y: -2.779,
						z: 0.47
					}, //一楼左门
					youmen2: {
						x: 1.69,
						y: 5.23,
						z: -0.47
					}, //二楼右门
					zuomen2: {
						x: 1.69,
						y: 5.23,
						z: 0.47
					}, //二楼左门
					doorleft: {
						x: 0.135,
						y: -1.2,
						z: -0.14 + 0.11
					}, //轿厢左门
					doorright: {
						x: 0.135,
						y: -1.2,
						z: -0.211
					}, //轿厢右门
					yeyinlungangsishen: {
						x: 0.265,
						y: 10.6,
						z: 0
					}, //曳引轮钢丝绳
					duizhonggangsishen: {
						x: 0.275,
						y: 9.08,
						z: 0.03
					}, //对重钢丝绳
					yijiegangsishen: {
						x: -2.139,
						y: 7.853,
						z: 0.818
					}, //曳引轮固定钢丝绳
					duizhonggudingduan: {
						x: 0.265,
						y: 10.598,
						z: 0
					}, //对重固定
					jiaoxianggudingduan: {
						x: -0.205,
						y: 9.305,
						z: 0.21
					}, //轿厢固定端 

				},
				modelsArray: [],
				resizeHandler: null, // 用于保存resize回调引用
				// 模型结束  
				scaleNum: 1,
				modelUrl: '',
				hiddenModelPoints: [],
				animationIndex: '',
				faultColor: '',
				dataList: [{
						name: '传感器0',
						id: 0
					}, {
						name: '传感器1',
						id: 1
					},
					{
						name: '传感器2',
						id: 2
					},
					{
						name: '传感器3',
						id: 3
					},
					{
						name: '传感器4',
						id: 4
					},
					{
						name: '传感器5',
						id: 5
					},
					{
						name: '传感器6',
						id: 6
					},
					{
						name: '传感器7',
						id: 7
					}

				],
				resources: {
					geometries: new Set(),
					materials: new Set(),
					textures: new Set()
				},
				// 模型结束  


			}
		},
		computed: {

		},
		beforeDestroy() {
			// / 取消所有异步操作
			if (this.loadingInstance) this.loadingInstance.close();

			// 释放Three.js资源
			this.releaseResources();

			// 移除事件监听
			window.removeEventListener('resize', this.resizeHandler);
			if (this.controls) {
				this.controls.dispose();
				this.controls = null;
			}

			// 停止动画循环
			if (this.animateId) {
				cancelAnimationFrame(this.animateId);
				this.animateId = null;
			}

			// 清除DOM
			const container = document.getElementById('model-container');
			if (this.container !== null) {
				this.container.removeChild(this.container.childNodes[0])
			}
		},
		created() {},
		mounted() {
			this.init();
			this.loadingInstance = Loading.service({
				text: '加载中',
				target: '#model-container',
				background: 'rgba(0,0,0,0.2)'
			});


		},
		methods: {
			// 新增资源释放方法
			releaseResources() {
				// 释放几何体
				this.resources.geometries.forEach(geometry => {
					geometry.dispose();
				});

				// 释放材质
				this.resources.materials.forEach(material => {
					material.dispose();
				});

				// 释放纹理
				this.resources.textures.forEach(texture => {
					texture.dispose();
				});

				// 释放渲染器
				if (this.renderer) {
					this.renderer.dispose();
					this.renderer.forceContextLoss();
					this.renderer = null;
				}

				// 释放场景
				if (this.scene) {
					while (this.scene.children.length > 0) {
						const obj = this.scene.children[0];
						this.scene.remove(obj);
					}
					this.scene = null;
				}

				// 释放相机
				if (this.camera) {
					this.camera = null;
				}

				// 清空资源追踪
				this.resources.geometries.clear();
				this.resources.materials.clear();
				this.resources.textures.clear();
			},

			// 模型开始
			//创建相机
			initCamera() {
				this.camera = new THREE.PerspectiveCamera(45, this.container.clientWidth / this.container
					.clientHeight,
					0.1, 10000)
				this.camera.position.set(43, 11, 22); //相机位置

			},
			//创建场景
			initScene() {
				this.scene = new THREE.Scene();
				//添加辅助坐标系开始
				// var axes = new THREE.AxesHelper(100);
				// this.scene.add(axes);
				//添加辅助坐标系结束
				// this.scene.background = new THREE.Color("#000000");
				// this.renderer.setClearColor(0xC6E2FF, 1)
				this.scene.add(this.camera)
			},
			//光源
			initLight() {
				// 增强半球光配置 
				const light = new THREE.HemisphereLight(0xffffff, 0x444444, 2); // 强度提升至2 
				light.position.set(0, 20, 0);
				this.scene.add(light);

				// 添加平行主光源 
				const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
				directionalLight.position.set(10, 20, 10);
				directionalLight.castShadow = true; // 开启阴影 
				this.scene.add(directionalLight);

				// 补充环境光源 
				const ambientLight = new THREE.AmbientLight(0x404040, 3);
				this.scene.add(ambientLight);
			},
			//渲染器
			initRenderer() {
				this.container = document.getElementById('model-container');
				this.renderer = new THREE.WebGLRenderer({
					antialias: true,
					alpha: true
				});
				// 设置 canvas 元素的样式，包括背景颜色和透明度
				this.renderer.domElement.style.backgroundColor = 'rgba(1,0, 66, 0.5)';
				this.renderer.setPixelRatio(this.container.devicePixelRatio);
				this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
				this.container.appendChild(this.renderer.domElement);

			},
			//视图控制器
			initControls() {
				this.controls = new OrbitControls(this.camera, this.renderer.domElement);
				//上下翻转的最大角度
				this.controls.maxPolarAngle = 1.5;
				//上下翻转的最小角度
				this.controls.minPolarAngle = 0.3;
				//是否允许缩放
				this.controls.enableZoom = true;
				//控制是否带有惯性
				this.controls.enableDamping = true
				// 设置摄像机距离目标点的最小和最大距离。这可以限制用户缩放的范围。 
				this.controls.minDistance = 1;
				this.controls.maxDistance = 100;

			},
			//加载设备模型
			//加载设备模型
			async initGLTF() {
				try {
					await this.loadMainModels();
					if (this.loadingInstance) this.loadingInstance.close();
				} catch (error) {
					console.error("模型加载失败:", error);
					if (this.loadingInstance) this.loadingInstance.close();
				}
			},
			async loadMainModels() {
				const modelUrls = [
					'glbmodel/ztjkxrmx.glb',
					'glbmodel/1yyl.glb',
					'glbmodel/2yylds.glb',
					'glbmodel/3jxdsl.glb',
					'glbmodel/4dzdsl.glb',
					'glbmodel/dz.glb',
					'glbmodel/jxwm.glb',
					'glbmodel/ycm.glb',
					'glbmodel/zcm.glb',
					'glbmodel/jxzm.glb',
					'glbmodel/jxym.glb',
					'glbmodel/ylugss.glb',
					'glbmodel/dzscgss.glb',
					'glbmodel/yjgss.glb',
					'glbmodel/dzgdggss.glb',
					'glbmodel/jxgddgss.glb',
				]; //电梯零部件模型地址 
				this.modelsArray = await this.loadModelsWithGLTFLoader(modelUrls);
				this.setupMainModels();
			},
			setupMainModels() {
				this.zhitikuangjia = this.modelsArray[0];
				this.zhitikuangjia.visible = true;
				this.zhitikuangjia.position.set(
					this.modelControls.zhitikuangjia.x,
					this.modelControls.zhitikuangjia.y,
					this.modelControls.zhitikuangjia.z
				);
				this.zhitikuangjia.scale.setScalar(2);
				this.zhitikuangjia.rotation.y += Math.PI / 2;
				console.log("直梯框架渲染模型:", this.zhitikuangjia);
				//
				this.yeyinlun = this.modelsArray[1];
				this.yeyinlun.visible = true;
				this.yeyinlun.position.set(
					this.modelControls.yeyinlun.x,
					this.modelControls.yeyinlun.y,
					this.modelControls.yeyinlun.z
				);
				this.yeyinlun.scale.setScalar(2);
				this.yeyinlun.rotation.y += Math.PI / 2;

				console.log("曳引轮:", this.yeyinlun);
				//
				this.yeyinddaoshenlun = this.modelsArray[2];
				this.yeyinddaoshenlun.visible = true;
				this.yeyinddaoshenlun.position.set(
					this.modelControls.yeyinddaoshenlun.x,
					this.modelControls.yeyinddaoshenlun.y,
					this.modelControls.yeyinddaoshenlun.z
				);
				this.yeyinddaoshenlun.scale.setScalar(2);
				this.yeyinddaoshenlun.rotation.y += 0;
				console.log("曳引导绳轮:", this.yeyinddaoshenlun);

				this.jiaoxiangdaoshenlun = this.modelsArray[3];
				this.jiaoxiangdaoshenlun.visible = true;
				this.jiaoxiangdaoshenlun.position.set(
					this.modelControls.jiaoxiangdaoshenlun.x,
					this.modelControls.jiaoxiangdaoshenlun.y,
					this.modelControls.jiaoxiangdaoshenlun.z
				);
				this.jiaoxiangdaoshenlun.scale.setScalar(2);
				this.jiaoxiangdaoshenlun.rotation.y += 0;
				console.log("轿厢导绳轮:", this.jiaoxiangdaoshenlun);

				this.duizhongdaoshenlun = this.modelsArray[4];
				this.duizhongdaoshenlun.visible = true;
				this.duizhongdaoshenlun.position.set(
					this.modelControls.duizhongdaoshenlun.x,
					this.modelControls.duizhongdaoshenlun.y,
					this.modelControls.duizhongdaoshenlun.z
				);
				this.duizhongdaoshenlun.scale.setScalar(2);
				this.duizhongdaoshenlun.rotation.y += Math.PI / 2;
				console.log("对重导绳轮:", this.duizhongdaoshenlun);

				this.duizhong = this.modelsArray[5];
				this.duizhong.visible = true;
				this.duizhong.position.set(
					this.modelControls.duizhong.x,
					this.modelControls.duizhong.y,
					this.modelControls.duizhong.z
				);
				this.duizhong.scale.setScalar(2);
				this.duizhong.rotation.z += Math.PI / 2;
				this.duizhong.rotation.x += -Math.PI / 2;
				console.log("对重:", this.duizhong);

				this.jiaoxiang = this.modelsArray[6];
				this.jiaoxiang.visible = true;
				this.jiaoxiang.position.set(
					this.modelControls.jiaoxiang.x,
					this.modelControls.jiaoxiang.y,
					this.modelControls.jiaoxiang.z
				);
				this.jiaoxiang.scale.setScalar(2);
				this.jiaoxiang.rotation.y += Math.PI / 2;
				console.log("轿厢:", this.jiaoxiang);

				this.youmen1 = this.modelsArray[7].clone();
				this.youmen1.visible = true;
				this.youmen1.position.set(
					this.modelControls.youmen1.x,
					this.modelControls.youmen1.y,
					this.modelControls.youmen1.z
				);
				this.youmen1.scale.setScalar(2);
				this.youmen1.rotation.y += 0;
				this.youmen1.rotation.z += -Math.PI / 2;
				this.youmen1.rotation.x += -Math.PI / 2;
				console.log("1-右层门:", this.youmen1);
				this.scene.add(this.youmen1);

				this.zuomen1 = this.modelsArray[8].clone();
				this.zuomen1.visible = true;
				this.zuomen1.position.set(
					this.modelControls.zuomen1.x,
					this.modelControls.zuomen1.y,
					this.modelControls.zuomen1.z
				);
				this.zuomen1.scale.setScalar(2);
				this.zuomen1.rotation.x += -Math.PI / 2;
				this.zuomen1.rotation.z += Math.PI / 2;
				console.log("1-左层门:", this.zuomen1);
				this.scene.add(this.zuomen1);

				this.youmen2 = this.modelsArray[7].clone();
				this.youmen2.visible = true;
				this.youmen2.position.set(
					this.modelControls.youmen2.x,
					this.modelControls.youmen2.y,
					this.modelControls.youmen2.z
				);
				this.youmen2.scale.setScalar(2);
				this.youmen2.rotation.y += 0;
				this.youmen2.rotation.z += -Math.PI / 2;
				this.youmen2.rotation.x += -Math.PI / 2;
				console.log("2-右层门:", this.youmen2);
				this.scene.add(this.youmen2);

				this.zuomen2 = this.modelsArray[8].clone();
				this.zuomen2.visible = true;
				this.zuomen2.position.set(
					this.modelControls.zuomen2.x,
					this.modelControls.zuomen2.y,
					this.modelControls.zuomen2.z
				);
				this.zuomen2.scale.setScalar(2);
				this.zuomen2.rotation.x += -Math.PI / 2;
				this.zuomen2.rotation.z += Math.PI / 2;
				console.log("2-左层门:", this.zuomen2);
				this.scene.add(this.zuomen2);


				this.doorleft = this.modelsArray[9];
				this.doorleft.visible = true;
				this.doorleft.position.set(
					this.modelControls.doorleft.x,
					this.modelControls.doorleft.y,
					this.modelControls.doorleft.z
				);
				this.doorleft.scale.setScalar(2);
				this.doorleft.rotation.y += Math.PI / 2;
				console.log("轿厢左门:", this.doorleft);
				this.scene.add(this.doorleft);

				this.doorright = this.modelsArray[10];
				this.doorright.visible = true;
				this.doorright.position.set(
					this.modelControls.doorright.x,
					this.modelControls.doorright.y,
					this.modelControls.doorright.z
				);
				this.doorright.scale.setScalar(2);
				this.doorright.rotation.y += Math.PI / 2;
				console.log("轿厢右门:", this.doorright);
				this.scene.add(this.doorright);

				this.yeyinlungangsishen = this.modelsArray[11];
				this.yeyinlungangsishen.visible = true;
				this.yeyinlungangsishen.position.set(
					this.modelControls.yeyinlungangsishen.x,
					this.modelControls.yeyinlungangsishen.y,
					this.modelControls.yeyinlungangsishen.z
				);
				console.log("曳引轮钢丝绳:", this.yeyinlungangsishen.position);
				this.yeyinlungangsishen.scale.setScalar(2);
				this.yeyinlungangsishen.rotation.x += -Math.PI / 2;
				this.yeyinlungangsishen.rotation.z += -Math.PI / 2;
				// doorright.rotation.z += Math.PI /2;
				console.log("曳引轮钢丝绳:", this.yeyinlungangsishen);
				this.scene.add(this.yeyinlungangsishen);

				this.duizhonggangsishen = this.modelsArray[12];
				this.duizhonggangsishen.visible = true;
				this.duizhonggangsishen.position.set(
					this.modelControls.duizhonggangsishen.x,
					this.modelControls.duizhonggangsishen.y,
					this.modelControls.duizhonggangsishen.z
				);
				console.log("对重钢丝绳:", this.duizhonggangsishen.position);
				this.duizhonggangsishen.scale.setScalar(2);
				this.duizhonggangsishen.rotation.x += -Math.PI / 2;
				this.duizhonggangsishen.rotation.z += -Math.PI / 2;
				// doorright.rotation.z += Math.PI /2;
				console.log("对重钢丝绳:", this.duizhonggangsishen);
				this.scene.add(this.duizhonggangsishen);

				this.yijiegangsishen = this.modelsArray[13].clone();
				this.yijiegangsishen.visible = true;
				this.yijiegangsishen.position.set(
					this.modelControls.yijiegangsishen.x,
					this.modelControls.yijiegangsishen.y,
					this.modelControls.yijiegangsishen.z
				);
				console.log("一节钢丝绳:", this.yijiegangsishen.position);
				this.yijiegangsishen.scale.setScalar(2);
				this.yijiegangsishen.rotation.x += -Math.PI / 2;
				this.yijiegangsishen.rotation.z += -Math.PI / 2;
				// doorright.rotation.z += Math.PI /2;
				console.log("一节钢丝绳:", this.yijiegangsishen);
				this.scene.add(this.yijiegangsishen);
				this.duizhonggudingduan = this.modelsArray[14];
				this.duizhonggudingduan.visible = true;
				this.duizhonggudingduan.position.set(
					this.modelControls.duizhonggudingduan.x,
					this.modelControls.duizhonggudingduan.y,
					this.modelControls.duizhonggudingduan.z
				);
				console.log("对重固定端钢丝绳:", this.duizhonggudingduan.position);
				this.duizhonggudingduan.scale.setScalar(2);
				this.duizhonggudingduan.rotation.x += -Math.PI / 2;
				this.duizhonggudingduan.rotation.z += -Math.PI / 2;
				console.log("对重固定端钢丝绳:", this.duizhonggudingduan);
				this.scene.add(this.duizhonggudingduan);

				this.jiaoxianggudingduan = this.modelsArray[15];
				this.jiaoxianggudingduan.visible = true;
				this.jiaoxianggudingduan.position.set(
					this.modelControls.jiaoxianggudingduan.x,
					this.modelControls.jiaoxianggudingduan.y,
					this.modelControls.jiaoxianggudingduan.z
				);
				console.log("轿厢固定端钢丝绳:", this.jiaoxianggudingduan.position);
				this.jiaoxianggudingduan.scale.setScalar(2);
				this.jiaoxianggudingduan.rotation.x += -Math.PI / 2;
				this.jiaoxianggudingduan.rotation.z += Math.PI / 2;
				console.log("轿厢固定端钢丝绳:", this.jiaoxianggudingduan);
				this.scene.add(this.jiaoxianggudingduan);
				let arr = [];
				this.scene.children.forEach(model => {
					model.traverse((child) => {
						// console.log(child.name, 'child---1')
						if (child.name.indexOf('轮') != -1 || child.name.indexOf('轿厢') != -1 || child.name
							.indexOf('绳') != -1 || child.name.indexOf('门') != -1 || child.name.indexOf(
								'对重') != -1) {
							arr.push(child);
							// console.log(arr, 'outline-----arr')
						}
					})
				});
				this.outlineObj(arr);
			},
			// async loadModelsWithGLTFLoader(urls) {
			// 	const loader = new GLTFLoader();
			// 	return Promise.all(urls.map(url => {
			// 		return new Promise((resolve, reject) => {
			// 			loader.load(url,
			// 				gltf => {
			// 					gltf.scene.visible = false;
			// 					this.scene.add(gltf.scene);
			// 					if (!modelCache.has(url)) {
			// 					            modelCache.set(url, gltf.scene);
			// 					          }
			// 					resolve(gltf.scene);
			// 				},
			// 				undefined,
			// 				error => {
			// 					console.error(`加载模型失败: ${url}`, error);
			// 					reject(error);
			// 				}
			// 			);
			// 		});
			// 	}));
			// },
			releaseResources() {
				// 清理所有加载请求
				abortControllers.forEach(controller => controller.abort());
				abortControllers.clear();

				// 优化后的资源释放
				const disposeObject = (obj) => {
					if (obj.isMesh) {
						if (obj.geometry) {
							obj.geometry.dispose();
						}
						if (obj.material) {
							[].concat(obj.material).forEach(material => {
								Object.values(material).forEach(value => {
									if (value instanceof THREE.Texture) {
										value.dispose();
									}
								});
								material.dispose();
							});
						}
					}
				};

				this.scene.traverse(disposeObject);
				this.renderer.dispose();
				this.renderer.forceContextLoss();
			},

			async loadModelsWithGLTFLoader(urls) {
				const loader = new GLTFLoader();
				return Promise.all(urls.map(url => {
					return new Promise((resolve, reject) => {
						const controller = new AbortController();
						abortControllers.add(controller);

						loader.load(url,
							gltf => {
								if (controller.signal.aborted) return;
								const model = this.cloneAndTrackModel(gltf.scene);
								model.visible = false;
								this.scene.add(model);
								modelCache.set(url, gltf.scene); // 缓存原始模型
								resolve(model);
							},
							undefined,
							error => {
								if (!controller.signal.aborted) reject(error);
							}
						);
					});
				}));
			},

			cloneAndTrackModel(source) {
				const model = source.clone(true);
				model.traverse(child => {
					if (child.isMesh) {
						// 标记为可释放资源
						child.userData.isDisposable = true;
					}
				});
				return model;
			},


			setupSmartRendering() {
				let renderRequested = false;
				const requestRender = () => {
					if (!renderRequested) {
						renderRequested = true;
						requestAnimationFrame(() => {
							this.renderer.render(this.scene, this.camera);
							if (this.composer) this.composer.render();
							renderRequested = false;
						});
					}
				};

				// 响应式渲染触发
				this.controls.addEventListener('change', requestRender);
				window.addEventListener('resize', () => {
					this.handleResize();
					requestRender();
				});

				// 页面可见性控制
				document.addEventListener('visibilitychange', () => {
					if (document.hidden) {
						this.animateId && cancelAnimationFrame(this.animateId);
					} else {
						requestRender();
					}
				});
			},
			init() {
				this.initRenderer()
				this.initCamera()
				this.initScene()
				this.initLight()
				this.initGLTF()
				this.initControls()
				this.setupSmartRendering();
			},
			// 新增resize处理函数
			handleResize() {
				if (!this.camera || !this.renderer || !this.container) return;

				this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
				this.camera.updateProjectionMatrix();
				this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			},
			// 优化后的高亮方法
			outlineObj(selectedObjects) {
				if (!this.renderer || selectedObjects.length === 0) return;

				// 清理旧composer
				if (this.composer) {
					this.composer.passes.length = 0;
					this.composer.dispose();
					this.composer = null;
				}

				// 初始化新composer
				this.composer = new EffectComposer(this.renderer);
				this.composer.addPass(new RenderPass(this.scene, this.camera));

				// 颜色配置映射
				const colorConfig = {
					'曳引钢丝绳empties': 0xFF071B, // 故障颜色
					'右层门门扇empties': 0xFFB62C, // 风险等级1级橙色
					'对重导绳轮empties': 0xFFFF38, // 风险等级2级黄色 
					'default': 0x00AEFB, // 风险等级4级蓝色

				};
				// 按对象类型分组
				const groupedObjects = selectedObjects.reduce((acc, obj) => {
					const colorKey = Object.keys(colorConfig).find(key => obj.name === key) || 'default';
					(acc[colorKey] = acc[colorKey] || []).push(obj);
					return acc;
				}, {});

				// 为每个颜色组创建独立的OutlinePass
				Object.entries(groupedObjects).forEach(([colorKey, objects]) => {
					const outlinePass = new OutlinePass(
						new THREE.Vector2(this.container.clientWidth, this.container.clientHeight),
						this.scene,
						this.camera
					);

					// 配置参数
					outlinePass.selectedObjects = objects;
					outlinePass.edgeStrength = 3.0;
					outlinePass.edgeGlow = 0.6;
					outlinePass.edgeThickness = 1.8;
					outlinePass.pulsePeriod = 2.5;
					outlinePass.visibleEdgeColor.setHex(colorConfig[colorKey]);

					this.composer.addPass(outlinePass);
				});

				// 添加抗锯齿
				const fxaaPass = new ShaderPass(FXAAShader);
				fxaaPass.material.uniforms.resolution.value.set(
					1 / this.container.clientWidth,
					1 / this.container.clientHeight
				);
				this.composer.addPass(fxaaPass);

				// 优化渲染模式
				this.optimizedRender();
			},
			// 优化渲染循环
			optimizedRender() {
				let lastRender = 0;
				const renderInterval = 1000 / 30; // 30fps

				const render = (timestamp) => {
					if (!this.composer) return;

					// 按需渲染
					if (timestamp - lastRender >= renderInterval) {
						this.composer.render();
						lastRender = timestamp;
					}

					this.animateId = requestAnimationFrame(render);
				};

				this.animateId = requestAnimationFrame(render);

				// 页面可见性控制
				document.addEventListener('visibilitychange', () => {
					if (document.hidden) {
						cancelAnimationFrame(this.animateId);
					} else {
						this.animateId = requestAnimationFrame(render);
					}
				});
			},
			// 新增渲染模式控制
			switchToRequestRender() {
				if (this.animateId) cancelAnimationFrame(this.animateId);

				const render = () => {
					if (this.composer) {
						this.composer.render();
					}
					this.animateId = requestAnimationFrame(render);
				};

				this.controls.addEventListener('change', render);
				this.animateId = requestAnimationFrame(render);
			},
			// 模型结束   


		}
	};
</script>

<style lang="scss" scoped>
	#model-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#model-container canvas {
		width: 100% !important;
		height: 100%;
	}
</style>